<template>
  <div class="certification">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">会员认证</h1>
        </header>
        <div class="mui-content">
          <form class="mui-input-group content" @submit.prevent="userCertification" :model="cerData">
            <div class="mui-input-row z-row" :class="{'is-danger':errors.has('userType')}">
              <label>会员身份</label>
              <input
                name="userType"
                v-model="userType.text"
                type="select"
                data-vv-as="会员身份"
                placeholder="请选择认证身份"
                v-validate="'required'"
                v-tap="{method:selectUserType}"/>
            </div>
            <span class="error-message" v-show="errors.has('userType')">{{errors.first('userType')}}</span>
            <div v-show="userType.value!='0'">
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('nickname')}" v-if="false">
                <label>会员昵称</label>
                <input
                  name="nickname"
                  v-model="cerData.nickname"
                  type="text"
                  maxlength="10"
                  data-vv-as="会员昵称"
                  v-validate="'required'"
                  placeholder="请输入昵称"/>
              </div>
              <span class="error-message" v-show="errors.has('nickname')" v-if="false">{{errors.first('nickname')}}</span>

              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('realname')}">
                <label>真实姓名</label>
                <input
                  name="realname"
                  v-model="cerData.realname"
                  type="text"
                  maxlength="10"
                  data-vv-as="真实姓名"
                  v-validate="'required'"
                  placeholder="请输入姓名"/>
              </div>
              <span class="error-message" v-show="errors.has('realname')">{{errors.first('realname')}}</span>

              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('idcard')}" v-if="userType.value!='1'">
                <label>身份证号</label>
                <input
                  name="idcard"
                  v-model="cerData.idcard"
                  type="text"
                  maxlength="18"
                  data-vv-as="身份证号"
                  v-validate="'required|idcard'"
                  placeholder="请输入身份证号"/>
              </div>
              <span class="error-message" v-show="errors.has('idcard')">{{errors.first('idcard')}}</span>
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('shopname')}" v-if="userType.value=='20'">
                <label>商铺名称</label>
                <input
                  name="shopname"
                  v-model="cerData.shopname"
                  type="text"
                  maxlength="20"
                  data-vv-as="商铺名称"
                  v-validate="'required'"
                  placeholder="请输入商铺名称"/>
              </div>
              <span class="error-message" v-show="errors.has('shopname')">{{errors.first('shopname')}}</span>
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('area')}" v-if="userType.value=='20'">
                <label>商铺地址</label>
                <input
                  name="area"
                  v-model="cerData.area"
                  type="select"
                  data-vv-as="商铺地址"
                  placeholder="省-市-区"
                  v-validate="'required'"
                  v-tap="{method:selectArea}"/>
              </div>
              <span class="error-message" v-show="errors.has('area')">{{errors.first('area')}}</span>
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('addr')}" v-if="userType.value=='20'">
                <label>详细地址</label>
                <input
                  name="addr"
                  v-model="cerData.addr"
                  type="text"
                  maxlength="50"
                  data-vv-as="详细地址"
                  v-validate="'required'"
                  placeholder="请输入详细地址"/>
              </div>
              <span class="error-message" v-show="errors.has('addr')">{{errors.first('addr')}}</span>
              <div class="mui-input-row z-row z-rows" :class="{'is-danger':errors.has('intro')}" v-if="userType.value=='20'">
                <textarea
                  id="intro"
                  name="intro"
                  v-model="cerData.intro"
                  maxlength="200"
                  data-vv-as="商家介绍"
                  v-validate="'required'"
                  placeholder="请输入商家介绍(可输入200字符)"
                  style="height: 100%;">
                </textarea>
              </div>
              <span class="error-message" v-show="errors.has('intro')">{{errors.first('intro')}}</span>

              <div class="mui-row z-img-row" :class="{'is-imgrowerr':errors.has('idcardz')||errors.has('idcardf')}" v-if="userType.value!='1'">
                <div class="mui-col-xs-6 mui-col-sm-6">
                  <z-upload
                    class="img-col-left w-upload idcard-z"
                    :class="{'is-imgdanger':errors.has('idcardz')}"
                    @getfile="getfile"
                    preview="1"
                    name="idcardz"
                    imgname="idcardimgz"
                    v-model="cerData.idcardimgz"
                    data-vv-as="身份证正面照片"
                    v-validate="'required'"
                    :uploadUrl="uploadUrl"
                    :deleteUrl="deleteUrl"
                    :img="cerData.idcardimgz"></z-upload>
                </div>
                <div class="mui-col-xs-6 mui-col-sm-6">
                  <z-upload
                    class="img-col-right w-upload idcard-f"
                    :class="{'is-imgdanger':errors.has('idcardf')}"
                    @getfile="getfile"
                    preview="2"
                    name="idcardf"
                    imgname="idcardimgf"
                    v-model="cerData.idcardimgf"
                    data-vv-as="身份证背面照片"
                    v-validate="'required'"
                    :uploadUrl="uploadUrl"
                    :deleteUrl="deleteUrl"
                    :img="cerData.idcardimgf"></z-upload>
                </div>
              </div>
              <span class="error-message" v-show="errors.has('idcardz')">{{errors.first('idcardz')}}</span>
              <span class="error-message" v-show="errors.has('idcardf')">{{errors.first('idcardf')}}</span>

              <div class="mui-row z-img-row" :class="{'is-imgrowerr':errors.has('permitimg')||errors.has('shopimg')}" v-if="userType.value=='20'">
                <div class="mui-col-xs-6 mui-col-sm-6">
                  <z-upload
                    class="img-col-left w-upload permit"
                    :class="{'is-imgdanger':errors.has('permitimg')}"
                    @getfile="getfile"
                    preview="3"
                    name="permitimg"
                    imgname="permitimg"
                    v-model="cerData.permitimg"
                    data-vv-as="营业执照照片"
                    v-validate="'required'"
                    :uploadUrl="uploadUrl"
                    :deleteUrl="deleteUrl"
                    :img="cerData.permitimg"></z-upload>
                </div>
                <div class="mui-col-xs-6 mui-col-sm-6">
                  <z-upload
                    class="img-col-right w-upload shop"
                    :class="{'is-imgdanger':errors.has('shopimg')}"
                    @getfile="getfile"
                    preview="4"
                    name="shopimg"
                    imgname="shopimg"
                    v-model="cerData.shopimg"
                    data-vv-as="门店照片"
                    v-validate="'required'"
                    :uploadUrl="uploadUrl"
                    :deleteUrl="deleteUrl"
                    :img="cerData.shopimg"></z-upload>
                </div>
              </div>
              <span class="error-message" v-show="errors.has('permitimg')">{{errors.first('permitimg')}}</span>
              <span class="error-message" v-show="errors.has('shopimg')">{{errors.first('shopimg')}}</span>

              <div class="mui-input-row mui-checkbox mui-left z-checkboxrow" v-if="userType.value=='20'">
                <div>提交后，3个工作日完成审核，如有疑问请联系客服</div>
              </div>
              <div class="mui-input-row mui-checkbox mui-left z-checkboxrow">
                <input name="protocolCheckbox" value="agree" type="checkbox" v-model="cerData.protocol">
                <label>同意</label><span class="z-protocol" v-tap="{method:toPage,params:'/protocol'}">《易销国际官方认证协议》</span>
              </div>
              <div class="mui-button-row z-row z-regbutton">
                <button
                  id="registerBut"
                  type="submit"
                  class="mui-btn mui-btn-primary mui-btn-outlined"
                  data-loading-text="提交中"
                  data-loading-icon="mui-spinner mui-spinner-custom"
                  :class="{'disabled':!cerData.protocol}"
                  :disabled="!cerData.protocol">提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ZUpload from '@/components/z-upload'
  export default {
    data(){
      return{
        cerData:{
          user_level_id:'',
          nickname:'',
          realname:'',
          idcard:'',
          protocol:false,
          shopname:'',
          area:'',
          addr:'',
          idcardimgz:'',
          idcardimgf:'',
          permitimg:'',
          shopimg:'',
          intro:'',
        },
        userType:{value: "0", text: ""},
        isapp:false,
        uploadUrl:'',
        deleteUrl:'',
      }
    },
    components:{
      ZUpload
    },
    created(){
      var that = this;
      mui.plusReady(function(){
        that.isapp=true;
      });
      that.uploadUrl=that.$http.adornUrl(that.$api.SysUpload);
      that.deleteUrl=that.$http.adornUrl(that.$api.SysDelete);
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005
      });
    },
    methods:{
      getfile(imgname,imgs,files,res){
        var that = this;
        if(res && res.errno==0){
          that.cerData[imgname]=res.data;
        } else if(res==''){
          that.cerData[imgname]=res;
        }
      },
      toPage(path){
        this.$router.push(path);
      },
      selectUserType(){
        var that = this;
        var picker = new mui.PopPicker();
        picker.setData([
          {value:'1',text:'消费者'},
          {value:'20',text:'笑笑商家'},
        ]);
        picker.show(function (selectItems) {
          that.userType = selectItems[0];
          that.cerData.user_level_id = selectItems[0].value;
        })
      },
      selectArea(){
        var that = this;
        var cityPicker = new mui.PopPicker({layer:3});
        cityPicker.setData(cityData3);
        cityPicker.show(function (items) {
          var area = '';
          for(var item in items){
            if(items[item].text){
              if(area){
                area+='-'+items[item].text
              }else{
                area+=items[item].text
              }
            }
          }
          that.cerData.area = area;
        });
      },
      userCertification(){
        var that = this;
        that.$validator.validate().then((result)=>{
          if(result){
            mui("#registerBut").button('loading');
            console.log("表单数据",that.cerData);
            that.$http.post(that.$http.adornUrl(that.$api.UpdataUser), {
              user_level_id:that.cerData.user_level_id,
              nickname:that.cerData.nickname,
              realname:that.cerData.realname,
              idcard:that.cerData.idcard,
              shopname:that.cerData.shopname,
              area:that.cerData.area,
              addr:that.cerData.addr,
              idcardimgz:that.cerData.idcardimgz,
              idcardimgf:that.cerData.idcardimgf,
              permitimg:that.cerData.permitimg,
              shopimg:that.cerData.shopimg,
              intro:that.cerData.intro,
            }).then(function(res){
              mui.toast(res.errmsg);
              if(res.errno == 0){
                that.$router.go(-1)
              }else{
                mui("#registerBut").button('reset');
              }
            }).catch(function (err) {
              mui.toast("执行失败请重试");
              mui("#registerBut").button('reset');
              console.log(err);
            });
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .certification{
    .mui-scroll-wrapper{
      background-color: #fff;
    }
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .content{
      padding:0.5rem 0.3rem 0 0.3rem;
      .z-row{
        height:0.8rem;
        margin-bottom:0.36rem;
        border:1px solid #ccc;
        border-radius: 0.1rem;
        label{
          font-size: 0.3rem;
          line-height: 0.8rem;
          padding:0 15px;
          width: 30%;
          border-right: 1px solid #ccc;
        }
        input{
          font-size: 0.3rem;
          height: 0.8rem;
          line-height: 0.8rem;
          width:70%;
          float: left;
          padding-left: 0.2rem;
        }
        .selectButton{
          width:70%;
          height:100%;
          border:0;
          font-size: 0.3rem;
        }
      }
      .z-rows{
        height:2.4rem;
        textarea{
          font-size: 0.3rem;
        }
      }
      .z-img-row{
        margin-bottom:0.36rem;
        .img-col-left{
          margin-right:0.1rem;
        }
        .img-col-right{
          margin-left:0.1rem;
        }
        .w-upload{
          border:2px dashed #ccc;
          border-radius: 0.2rem;
        }
        .idcard-z{
          background:url("https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/icon/idcard-z.png") no-repeat center;
          background-size: 100% 100%;
        }
        .idcard-f{
          background:url("https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/icon/idcard-f.png") no-repeat center;
          background-size: 100% 100%;
        }
        .permit{
          background:url("https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/icon/permit.png") no-repeat center;
          background-size: 100% 100%;
        }
        .shop{
          background:url("https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/icon/shop.png") no-repeat center;
          background-size: 100% 100%;
        }
        .is-imgdanger{
          border: 2px dashed red;
        }
      }
      .z-checkboxrow{
        height:0.5rem;
        font-size: 0.2rem;
        input[type=checkbox]{
          height:0.35rem;
          line-height: 0.35rem;
          top:0;
          left:0;
          margin-top:0.06rem;
        }
        input[type=checkbox]:before{
          font-size: 0.35rem;
        }
        label{
          height:0.5rem;
          line-height: 0.5rem;
          padding:0 0 0 0.4rem;
          color:#000;
          width:1rem;
        }
        .z-protocol{
          display: inline-block;
          float: none;
          color:#007aff;
        }
      }
      .z-regbutton{
        margin-top:0.1rem;
        padding-top: 0px;
        border:0;
        button{
          width:100%;
          height:100%;
          border-radius: 0.2rem;
        }
        .disabled{
          color:#333;
          border:1px solid #333;
        }
      }
      .iscode-danger{
        margin-bottom:0;
      }
      .is-danger{
        border:1px solid red;
        margin-bottom:0;
      }
      .error-message{
        font-size: 0.18rem;
        color:red;
      }
      .is-imgrowerr{
        margin-bottom:0;
      }
    }
  }
</style>
